<script setup>
import dayjs from 'dayjs'
import { ref } from 'vue'
import zhCN from 'ant-design-vue/es/locale/zh_CN'
import BaseApp from "~/contentScripts/views/sycm/baseApp.vue";

import Category from '~/contentScripts/views/tao/detail/components/category.vue'
import DetailDownload from '~/contentScripts/views/tao/detail/components/detailDownload.vue'
import DetailTool from '~/contentScripts/views/tao/detail/components/DetailTool.vue'
import OtherTool from '~/contentScripts/views/tao/detail/components/otherTool.vue'
import Sales from '~/contentScripts/views/tao/detail/components/sales.vue'
import storeRelated from '~/contentScripts/views/tao/detail/components/storeRelated/index.vue'
// const loginVisible = ref(false)
import { userInfo } from '~/logic'
const loginVisible = ref(false)
dayjs.locale('zh-cn')
onMounted(() => {
  userInfo()
})
const opacity = ref(0)
setTimeout(() => {
  opacity.value = 1
}, 200)
// /**
//  * @type ItemInterface
//  */
// const item = getCurrentInstance().proxy.$item
// console.log(item);
// console.log('运行：'+item.itemId())
// item.itemSimilar(item.itemId()).then((res) => {
//   console.log(res)
// })
</script>

<template>
  <base-app>
    <div class="detail-box" :style="{opacity}">
      <a-row type="flex">
        <a-col>
          <Logo size="60" />
        </a-col>
        <a-col flex="1" class="content">
          <a-row type="flex">
            <a-col>
              <Category />
            </a-col>
            <div style="width: 5px;" />
            <a-col flex="1">
              <Sales @login="loginVisible = true" />
            </a-col>
          </a-row>
          <a-row type="flex" style="margin-top: 5px;">
            <DetailDownload @login="loginVisible = true"/>
            <div style="width: 5px;" />
            <DetailTool />
<!--            <div style="width: 5px;" />-->
<!--            <OtherTool />-->
          <!--          <a-col flex="1"> -->
          <!--            <Sales @login="loginVisible = true" /> -->
          <!--          </a-col> -->
          </a-row>
          <a-row type="flex">
            <storeRelated />
          </a-row>
<!--          <a-row type="flex" :gutter="5" style="margin-top: 5px;">-->
<!--            <a-col flex="1">-->
<!--              <OtherTool />-->
<!--            </a-col>-->
<!--          </a-row>-->
        </a-col>
      </a-row>
    </div>
    <user-login-modal :login-visible="loginVisible" @close="loginVisible = false" />
  </base-app>
</template>

<style lang="less">
.detail-box {
  transition: all .5s;
  margin: 0 auto;
  height: 100%;
  background: rgba(0,0,0,.08);
  padding: 10px;
  border-radius: 10px;
  box-shadow: #eeeeee 0 0 10px;
  margin-bottom: 10px;
  opacity: 0;
  .content {
    padding-left: 10px;
    .label {
      display: contents;
      color: #222;
    }

    .inner-box {
      background: #fff;
      padding:3px 8px;
      border-radius: 5px;
      border: 1px solid #eee;
      height: 19px;
      line-height: 19px;
      text-align: center;
      position: relative;
      font-size: 12px;
      box-sizing: content-box;
      *{
        font-size: 12px;
      }
      &.btn{
        transition: all .5s;
        &:hover{
          cursor: pointer;
          background: #1890ff;
          color: #fff;
        }
      }
    }

    .label, .bold {
      font-weight: bold;
    }

    .category-box {
      width: 200px;

      .category-content {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
    .blue {
      color: #1890ff;
    }
  }
}
</style>
